import React from 'react'
// ===================================================================== image
import Box1 from '@img/box-1.png'
import Box2 from '@img/box-2.png'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== private template
const Page 	= $Lazy.load(()=>import('#tp/page/page-container'))
const Image = $Lazy.load(()=>import('@tp/image'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		
	}
	
	componentDidMount(){
		
	}
	
	BoxComponent = ({title, src, className, url}) => (
		<li style={{width:200,height:200}} className={`bcm cf hover-o fxmc r10px cp ${className}`} onClick={()=> $fn.pushTo(this,url)}>
			<div>
				<div className='fxmc'><Image src={src} width={60} /></div>
				<p className='f14 mt10'>{title}</p>
			</div>
		</li>
	)
	
	render(){
		return (
			<Page title='标本箱转移'>
				<div className='ex fxmc tc'>
					<div>
						<div className='f24 b lh'>选择转箱模式</div>
						<p className='c0 f14 lh24 mt20'>请在标本箱转移菜单下选择标本箱转移模式。<br/>整箱转移时只需要扫描旧标本箱条码与新标本箱条码即可。</p>
						<ul className='fx mt20'>
							<this.BoxComponent title='整箱转箱' src={Box1} className='mr50' url='all' />
							<this.BoxComponent title='部分转箱' src={Box2}  url='part'/>
						</ul>
					</div>
				</div>
			</Page>
		)
	}
}

export default Index